<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>酒仙后台</title>
	<link rel="stylesheet" href="./public/bs/css/bootstrap.min.css">
	<script src="./public/bs/js/jquery.min.js"></script>
	<script src="./public/bs/js/bootstrap.min.js"></script>
	<style>
		*{
			font-family: 微软雅黑;
		}
		.container{
			padding-top: 70px;	/*因为固定的导航条设置了浮动，会盖住其他内容，而导航条的高度占了50px*/
		}
	</style>
</head>
<body>
	<div class="container">
		<!-- <h1>酒仙后台</h1> -->
			<!--导航菜单-->
			<nav class="navbar navbar-inverse navbar-fixed-top">
				<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
				  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				    <span class="sr-only">Toggle navigation</span>
				    <span class="icon-bar"></span>
				    <span class="icon-bar"></span>
				    <span class="icon-bar"></span>
				  </button>
				  <a class="navbar-brand" href="#">酒仙后台管理系统</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				  <ul class="nav navbar-nav navbar-right">
				    <li><a href="#"><span class="glyphicon glyphicon-star-empty">站点首页</span></a></li>
				   	<li><a href="#"><span class="glyphicon glyphicon-user">Admin</span></a></li>
				   	<li>
				   		<a href="#myModal" data-toggle="modal">
				   			<span class="glyphicon glyphicon-cog">修改密码</span>
				   		</a>
				   	</li>
				   	<li><a href="#"><span class="glyphicon glyphicon-off">安全退出</span></a></li>
				  </ul>
				</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>

			<!--修改密码的模态框的实现-->
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
						<div class="modal-dialog" role="document">
						<div class="modal-content">
						  <div class="modal-header">
						    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						    <h4 class="modal-title" id="myModalLabel">修改管理员密码</h4>
						  </div>
						  <div class="modal-body">
						    <form action="" method="post">
						    	<div class="form-group">
						    		<label for="passwd">旧密码</label>
						    		<input type="text" class="form-control">
						    	</div>
						    	<div class="form-group">
						    		<label for="passwd">新密码</label>
						    		<input type="text" class="form-control">
						    	</div>
						    	<div class="form-group">
						    		<label for="passwd">确认密码</label>
						    		<input type="text" class="form-control">
						    	</div>
						    </form>
						  </div>
						  <div class="modal-footer">
						    <button type="button" class="btn btn-default" data-dismiss="modal">
						    	关闭
						    </button>
						    <button type="button" class="btn btn-primary">修改</button>
						  </div>
						</div>
						</div>
						</div>
				<!--模态框的结束-->

			<!--后台主体内容-->
			<div class="row">

				<div class="col-md-2">
					<div class="list-group">
						<a href="javascript:" class="list-group-item active">用户管理:</a>
						<a href="javascript:" class="list-group-item usershow">查看用户</a>
						<a href="javascript:" class="list-group-item useradd">添加用户</a>
					</div>	

					<div class="list-group">
						<a href="javascript:" class="list-group-item active">分类管理:</a>
						<a href="" class="list-group-item">查看分类</a>
						<a href="" class="list-group-item">添加分类</a>
					</div>	

					<div class="list-group">
						<a href="javascript:" class="list-group-item active">品牌管理:</a>
						<a href="" class="list-group-item">查看品牌</a>
						<a href="" class="list-group-item">添加品牌</a>
					</div>	

					<div class="list-group">
						<a href="javascript:" class="list-group-item active">商品管理:</a>
						<a href="" class="list-group-item">查看商品</a>
						<a href="" class="list-group-item">添加商品</a>
					</div>	

					<div class="list-group">
						<a href="javascript:" class="list-group-item active">订单管理:</a>
						<a href="" class="list-group-item">查看订单</a>
						<a href="" class="list-group-item">添加订单</a>
					</div>	
				</div>

				<div class="col-md-10 rightinfo">
					<div class="jumbotron">
						<h1>欢迎回到酒仙后台</h1>
						<div>
							<img src="./public/img/jx.jpg" alt="" width="100%">
						</div>
						<br />
						<a href="../index.html" class="btn btn-primary btn-lg" target="_blank">
						网站首页
						</a>
						<a href="./login.html" class="btn btn-danger btn-lg" onclick="return confirm('您确认要退出吗?');">
							退出登录
						</a>
					</div>
				</div>
			</div>	<!-- /.row-->
	</div>	<!-- /.container-->
</body>
<script>
		$('.list-group .list-group-item:not(.active)').hide();	/*隐藏子菜单*/
		$('.active').click(function(){	//点击主菜单实现子菜单的显示和隐藏
			$(this).siblings().toggle();
			$(this).parent().siblings().children('.list-group-item:not(.active)').hide();
		});
		$('.usershow').click(function(){	//点击查看用户，右侧加载出查看用户的界面
			$('.rightinfo').load('usershow.html');
		});
		$('.useradd').click(function(){		//点击添加用户,右侧加载出添加用户的页面
			$('.rightinfo').load('useradd.html');
		});
</script>
</html>